<template>
    <div class="demo">
        <ul>
            <li v-for="item,index in list" :key="item">{{item}}</li>
        </ul>
        <button @click="add">添加数据</button>

        <ul>
            <li v-for="item,key,index of obj">{{item}}</li>
        </ul>
        <button @click="addObj">往对象添加属性</button>
        <h1>{{msg}}</h1>
    </div>
</template>
<script>
import mixin from '../mixin/index.js'
export default {
    data() {
        return {
            list:['西游记','红楼梦'],
            obj:{
                name:'王五',
                age:18
            }
        }
    },
    mixins:[mixin],
    beforeUpdate() {
        console.log('更新之前')
    },
    updated() {
        console.log('更新之后')
    },
    methods: {
        add(){
            // push()方法页面可以监听到    不会造成视图不更新
            // this.list.push('三国演义')
            // this.list[2] = "三国演义"    通过下标添加  页面的钩子函数无法监听到数据的变化beforeUpdate，updated都不会执行 所以视图不会更新  但是  打印数据已经发生了变化
            // 语法
            //   this.$set(this.object/array, propertyName/index, value);


            this.$set(this.list,2,'三国演义')
            
            // console.log(this.list);


        },
        addObj(){
            // this.obj.sex = '男'
            // console.log(this.obj);
            this.$set(this.obj,'sex','男')

        }
    },
}
</script>